<script>
import profile from "@/components/Profile";
import { getDicMap, getUserInfo, setColdCompany } from "@/utils/storage";
import { useTzRouter } from "@/vhooks/useTzRouter";
import { reactive } from "vue";
import { coldQueryApi } from "./api";
import { useHongkong } from "./useHongkong";
import { useMainland } from "./useMainland";

export default {
  name: "Home",
  components: { profile },

  setup() {
    const state = reactive({
      userInfo: getUserInfo(),
    });

    const { navigateTo } = useTzRouter();

    coldQueryApi().then((res) => {
      setColdCompany(res.data);
    });
    //hasHkBund 是否有香港模块权限
    const { hasHkBund } = getUserInfo();
    const { userType } = getDicMap();

    //大陆段
    const mainlandHook = useMainland(state, navigateTo);
    //香港段
    const hongkongHook = useHongkong(state);

    return () => (
      <tz-view class="home">
        <profile></profile>
        {mainlandHook()}
        {(userType?.isPersonal || hasHkBund) && hongkongHook()}
      </tz-view>
    );
  },
};
</script>

<style lang="scss">
.home {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  width: 100%;

  .section-mainland,
  .section-hongkong {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    @extend %bb1;

    .section-title {
      color: #1aad16;
      font-size: 12px;
      padding: 10px 15px 5px;
    }
    .grid {
      width: 100%;
      display: flex;
      flex-flow: row wrap;

      .mainland,
      .hongkong {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 33.33%;
        flex: none;
        height: 122px;
        cursor: pointer;

        &:active {
          background-color: $hover-color;
        }

        .item {
          height: 66px;
          width: 66px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;

          .tz-image {
            width: 75%;
          }
          .new-tag {
            position: absolute;
            top: -2px;
            right: -14px;
            width: 28px;
            height: 22px;
            font-size: 9px;
            background: $danger-color-end;
            border-radius: 50%;
            color: $white;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
        .title {
          font-size: 14px;
          margin-top: 5px;
        }
      }
    }
  }
}
</style>
